<template>
    <view class="division-picker-container">
        <!-- 顶部导航 -->
        <view class="nav-bar">
            <view class="back-btn" @click="handleBack">
                <text class="back-icon">←</text>
                <text class="back-text">返回</text>
            </view>
            <view class="title">选择区划</view>
            <view class="placeholder"></view>
        </view>

        <!-- 已选择区域显示 -->
        <view class="selected-area">
            <view class="location-icon"></view>
            <text class="selected-text"
                >选择区划：{{ selectedProvince ? selectedProvince.label : ''
                }}{{ selectedCity ? '>' + selectedCity.label : ''
                }}{{ selectedDistrict ? '>' + selectedDistrict.label : '' }}</text
            >
        </view>

        <!-- 三级联动选择区域 -->
        <view class="picker-content">
            <!-- 省份选择 -->
            <scroll-view class="province-scroll" scroll-y="true">
                <view
                    class="province-item"
                    v-for="(province, index) in provinces"
                    :key="province.value"
                    :class="{ active: selectedProvince && selectedProvince.value === province.value }"
                    @click="selectProvince(province, index)"
                >
                    {{ province.label }}
                </view>
            </scroll-view>

            <!-- 城市选择 -->
            <scroll-view v-if="selectedProvince" class="city-scroll" scroll-y="true">
                <view
                    class="city-item"
                    v-for="city in cities"
                    :key="city.value"
                    :class="{ active: selectedCity && selectedCity.value === city.value }"
                    @click="selectCity(city)"
                >
                    {{ city.label }}
                </view>
            </scroll-view>

            <!-- 区县选择 -->
            <scroll-view v-if="selectedCity" class="district-scroll" scroll-y="true">
                <view
                    class="district-item"
                    v-for="district in districts"
                    :key="district.value"
                    :class="{ active: selectedDistrict && selectedDistrict.value === district.value }"
                    @click="selectDistrict(district)"
                >
                    {{ district.label }}
                </view>
            </scroll-view>
        </view>

        <!-- 底部确定按钮 -->
        <view class="confirm-btn" @click="handleConfirm"> 确定 </view>
    </view>
</template>

<script>
import areaData from '@/static/area.js';

export default {
    name: 'DivisionPicker',
    data() {
        return {
            areaData: areaData,
            selectedProvince: null,
            selectedCity: null,
            selectedDistrict: null,
            provinces: [],
            cities: [],
            districts: []
        };
    },
    mounted() {
        // 初始化省份数据
        this.provinces = this.areaData[0];
    },
    methods: {
        // 选择省份
        selectProvince(province, index) {
            this.selectedProvince = province;
            this.selectedCity = null;
            this.selectedDistrict = null;

            // 更新城市数据
            this.cities = this.areaData[1][index] || [];
            this.districts = [];
        },

        // 选择城市
        selectCity(city) {
            this.selectedCity = city;
            this.selectedDistrict = null;

            // 更新区县数据
            const provinceIndex = this.provinces.findIndex((p) => p.value === this.selectedProvince.value);
            const cityIndex = this.cities.findIndex((c) => c.value === city.value);
            this.districts = this.areaData[2][provinceIndex]?.[cityIndex] || [];
        },

        // 选择区县
        selectDistrict(district) {
            this.selectedDistrict = district;
        },

        // 处理确定按钮点击
        handleConfirm() {
            if (this.selectedProvince && this.selectedCity && this.selectedDistrict) {
                console.log(1);

                const result = {
                    province: this.selectedProvince,
                    city: this.selectedCity,
                    district: this.selectedDistrict
                };
                console.log(result);

                // 触发回调事件，传递选择结果
                this.$emit('confirm', result);
            } else {
                uni.showToast({
                    title: '请选择完整的区划信息',
                    icon: 'none'
                });
            }
        },

        // 处理返回按钮点击
        handleBack() {
            this.$emit('back');
        }
    }
};
</script>

<style scoped>
.division-picker-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
}

/* 顶部导航栏 */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 88rpx;
    background-color: #2c5e9f;
    color: #ffffff;
}

.back-btn {
    display: flex;
    align-items: center;
}

.back-icon {
    font-size: 36rpx;
    margin-right: 8rpx;
}

.back-text {
    font-size: 32rpx;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
}

.placeholder {
    width: 100rpx;
}

/* 已选择区域 */
.selected-area {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #e5e5e5;
    margin-bottom: 20rpx;
}

.location-icon {
    color: #ff6700;
    font-size: 32rpx;
    margin-right: 10rpx;
}

.selected-text {
    font-size: 28rpx;
    color: #333333;
}

/* 选择区域 */
.picker-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.province-scroll,
.city-scroll,
.district-scroll {
    flex: 1;
    height: 100%;
    background-color: #ffffff;
    margin-right: 2rpx;
}

.province-item,
.city-item,
.district-item {
    padding: 24rpx 30rpx;
    font-size: 28rpx;
    color: #333333;
    border-bottom: 1rpx solid #f0f0f0;
}

.province-item.active,
.city-item.active,
.district-item.active {
    color: #2c5e9f;
    background-color: #f1f8ff;
}

/* 确定按钮 */
.confirm-btn {
    margin: 20rpx;
    height: 90rpx;
    background-color: #2c5e9f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    border-radius: 8rpx;
}
</style>
